<template>
  <div class="user_right fl ml20">
    <div class="inquiry_top">
      <el-input v-model="brand" placeholder="查询品牌"></el-input>
      <button>查询</button>
      <button @click="batch_remove">批量删除</button>
    </div>
    <div class="inquiry_content">
      <table>
        <colgroup>
          <col width="77" />
          <col width="79" />
          <col width="128" />
          <col width="114" />
          <col width="89" />
          <col width="89" />
          <col width="89" />
          <col width="143" />
          <col width="88" />
        </colgroup>
        <tbody>
          <tr class="tbody_top">
            <th class="tha">
              <input
                type="checkbox"
                name="vehicle"
                value="Bike"
                ref="check_all"
                @click="switchItem()"
              />
              <span>编号</span>
            </th>
            <th>品牌</th>
            <th>型号</th>
            <th>采购数量(套)</th>
            <th>收货地</th>
            <th>剩余时间</th>
            <th>响应人数</th>
            <th>当前报价(元/套)</th>
            <th>操作</th>
          </tr>
        </tbody>
        <tbody v-for="(item,index) in List" :key="index">
          <tr class="tbody_content">
            <td class="tda">
              <input
                type="checkbox"
                class="check-item"
                name="vehicle"
                :value="index"
                :checked="item.ischeck"
                @click="isSelect(index)"
              />
              <span>{{index}}</span>
            </td>
            <td>{{item.brand}}</td>
            <td>{{item.model}}</td>
            <td>{{item.pairs}}</td>
            <td>{{item.shipping_address}}</td>
            <td>{{item.remaining_time}}个月</td>
            <td>{{item.number_responses}}人</td>
            <td>{{item.current_price}}元/套</td>
            <td>
              <el-link type="danger" @click="delete_quote(index)">删除</el-link>
            </td>
          </tr>
          <tr>
            <td colspan="9">
              <div class="underline"></div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="laypage">
      <el-pagination background layout="prev, pager, next" :total="1000"></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      brand: "",
      List: [
        {
          brand: "施耐德",
          model: "C60 UL489",
          pairs: "256",
          shipping_address: "湖北武汉",
          remaining_time: "1",
          number_responses: "263",
          current_price: "288",
          ischeck: false
        },
        {
          brand: "施耐德",
          model: "C60 UL489",
          pairs: "256",
          shipping_address: "湖北武汉",
          remaining_time: "1",
          number_responses: "263",
          current_price: "288",
          ischeck: false
        },
        {
          brand: "施耐德",
          model: "C60 UL489",
          pairs: "256",
          shipping_address: "湖北武汉",
          remaining_time: "1",
          number_responses: "263",
          current_price: "288",
          ischeck: false
        },
        {
          brand: "施耐德",
          model: "C60 UL489",
          pairs: "256",
          shipping_address: "湖北武汉",
          remaining_time: "1",
          number_responses: "263",
          current_price: "288"
        },
        {
          brand: "施耐德",
          model: "C60 UL489",
          pairs: "256",
          shipping_address: "湖北武汉",
          remaining_time: "1",
          number_responses: "263",
          current_price: "288",
          ischeck: false
        },
        {
          brand: "施耐德",
          model: "C60 UL489",
          pairs: "256",
          shipping_address: "湖北武汉",
          remaining_time: "1",
          number_responses: "263",
          current_price: "288",
          ischeck: false
        },
        {
          brand: "施耐德",
          model: "C60 UL489",
          pairs: "256",
          shipping_address: "湖北武汉",
          remaining_time: "1",
          number_responses: "263",
          current_price: "288",
          ischeck: false
        },
        {
          brand: "施耐德",
          model: "C60 UL489",
          pairs: "256",
          shipping_address: "湖北武汉",
          remaining_time: "1",
          number_responses: "263",
          current_price: "288",
          ischeck: false
        },
        {
          brand: "施耐德",
          model: "C60 UL489",
          pairs: "256",
          shipping_address: "湖北武汉",
          remaining_time: "1",
          number_responses: "263",
          current_price: "288",
          ischeck: false
        },
        {
          brand: "施耐德",
          model: "C60 UL489",
          pairs: "256",
          shipping_address: "湖北武汉",
          remaining_time: "1",
          number_responses: "263",
          current_price: "288",
          ischeck: false
        }
      ]
    };
  },
  // created() {
  //   this.List.forEach(item => {
  //     item.ischeck = true;
  //   });
  // },
  methods: {
    // 全选
    switchItem() {
      let isallCheck = this.$refs.check_all.checked;
      this.List.forEach(item => {
        console.log(item);
        if (isallCheck) {
          item.ischeck = true;
        } else {
          item.ischeck = false;
        }
      });
      console.log(this.List);
    },

    // 批量删除
    batch_remove() {
      let checkList = this.List.filter(item => item.ischeck === false);
      let ischeck = this.List.filter(item => item.ischeck === true);
      console.log(ischeck);
      if (ischeck.length === 0) {
        this.$message({
          message: "请先选择商品",
          type: "warning"
        });
      } else {
        this.$confirm("此操作将永久删除此条报价, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            this.List = checkList;
            this.$message({
              type: "success",
              message: "删除成功!"
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
      }
    },
    
    // 获取选中
    isSelect(index) {
      this.List[index].ischeck = !this.List[index].ischeck;
    },

    // 删除
    delete_quote(index) {
      this.$confirm("此操作将永久删除此条报价, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.List.splice(index,1)
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  }
};
</script>

<style lang="scss" scope>
.user_right {
  padding-bottom: 100px;
}
.inquiry_top {
  display: flex;
  align-items: center;
  padding: 0 28px;
  margin-top: 25px;
  .el-input {
    width: 260px;
  }
  > button {
    height: 32px;
    width: 110px;
    background: #4448f8;
    border: 0;
    color: #fff;
    border-radius: 3px;
    margin-left: 20px;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    &:hover {
      background: #777acc9d;
    }
  }
}
.tbody_top {
  background: #eeeeee;
  width: 912px;
  height: 50px;
  margin-left: 19px;
}
.inquiry_content {
  padding-left: 27px;
  margin-top: 35px;
}
.underline {
  height: 2px;
  width: 100%;
  border-bottom: 2px dashed #bfbfbf;
}
.tbody_content {
  height: 50px;
}
.tda {
  padding-left: 20px;
  text-align: left;
  > span {
    margin-left: 5px;
  }
}
.tha {
  text-align: left;
  padding-left: 20px;
}
.laypage {
  margin-top: 60px;
  display: flex;
  justify-content: center;
}
td {
  text-align: center;
}
</style>